// import { addClass, removeClass } from "../helper";

import type { EaseTabs } from "../index";
import type { ITab } from '../../types/index';
export class Creator {
    eTabs: EaseTabs;
    tabWrap: HTMLUListElement | undefined;
    // 用于存储已生成的随机数的数组
    uniqueData:any = [];
    constructor(eTabs: EaseTabs){
        this.eTabs = eTabs;
    }
    getTabWrap() {
        this.tabWrap = document.createElement("ul");
        this.tabWrap.classList.add(this.eTabs.names.tabWrapClassName);
        return this.tabWrap;
    }
    getTab(item: ITab, isFocus?: boolean, index?: number) {
        const tab = document.createElement("li");
        const names = this.eTabs.names;
        tab.classList.add(names.tabContainerClassName);
        tab.setAttribute("data-index", item.id!);
        if (!(this.eTabs.fixed && index === 0)) {
            tab.setAttribute("draggable","true");
        }
        if (isFocus) {
            this.clearFocus();
            tab.classList.add(names.tabFocusClassName);
        }
        const div = this.__getInnerTab(item, isFocus, index);
        tab.appendChild(div);
        return tab;
    }
    private __getInnerTab(tab: ITab, isFocus?: boolean, index?: number) {
        const div = document.createElement("div");
        div.setAttribute("data-tip", tab.title);
        const names = this.eTabs.names;
        div.classList.add(names.tabClassName);
        if (tab.type == "loading") {
            div.classList.add(names.tabLoadingClassName);
            div.appendChild(this.__getIcon(this.eTabs.theme.loadingIcon));
        } else if(tab.icon) {
            div.classList.add(names.tabIconClassName);
            div.appendChild(this.__getIcon(tab.icon));
        }
        div.appendChild(this.__getTitle(tab.title))
        const close = this.__getCloseIcon();
        // div.appendChild(this.__getTextMark());
        div.appendChild(close);
        if (isFocus) {
            if (this.eTabs.fixed) {
                if (index == 0) {
                    div.removeChild(close);
                }
            }
        }
        this.__setDivTitle(div, tab);
        return div;
    }

    private __setDivTitle(div: HTMLDivElement, item: ITab){
        if (Array.isArray(this.eTabs.toolTipKeys) && this.eTabs.toolTipKeys.length > 0) {
            const temp: string[] = [];
            this.eTabs.toolTipKeys.forEach((key) => {
                temp.push(item[key])
            });
            const title = temp.join("\n");
        }
        if (typeof this.eTabs.toolTipKeys == "string" && this.eTabs.toolTipKeys) {
            const title = item[this.eTabs.toolTipKeys];
        }
    }

    // private __getTextMark(){
    //     const span = document.createElement("span");
    //     span.classList.add(`${this.eTabs.names.tabClassName}-mark`);
    //     return span;
    // }
    private __getCloseIcon(){
        const span = document.createElement("span");
        span.classList.add(`${this.eTabs.names.tabClassName}-close`);
        return span;
    }
    private __getIcon(src: string){
        const img = document.createElement("img");
        img.src = src;
        return img;
    }
    private __getTitle(text: string){
        const span = document.createElement("span");
        span.classList.add(`${this.eTabs.names.tabClassName}-title`);
        span.innerText = text;
        return span;
    }

    lis(): NodeListOf<HTMLLIElement> {
        return this.tabWrap!.querySelectorAll("li");
    }

    init(){
        this.initLis();
    }
    initLis() {
        const lis = this.lis();
        if (lis.length > 10 && lis[0].clientWidth < 38) {
            this.tabWrap?.setAttribute('is-mini', '');
        } else if (lis.length > 10 && lis[0].clientWidth < 56) {
            this.tabWrap?.setAttribute('is-small', '');
            this.tabWrap?.removeAttribute('is-mini');
        } else {
            this.tabWrap?.removeAttribute('is-small');
            this.tabWrap?.removeAttribute('is-mini');
        }
    }

    clearFocus() {
        const lis = this.lis();
        const names = this.eTabs.names;
        lis.forEach(item => {
            if (item.classList.contains(names.tabFocusClassName)) {
                item.classList.remove(names.tabFocusClassName);
            }
        })
    }

    setFocus(index: number) {
        const lis = this.lis();
        if (!lis || lis.length < 1) {
            return;
        }

        const names = this.eTabs.names;
        const focusLi = lis[index];
        focusLi.classList.add(names.tabFocusClassName);
        return focusLi;
    }

    changeFocus(index: number) {
        this.clearFocus();
        const lis = this.lis();
        const names = this.eTabs.names;
        const target = lis[index];
        target.classList.add(names.tabFocusClassName);
    }

    add(item: ITab){
        const tab = this.getTab(item, true);
        this.tabWrap!.appendChild(tab);
    }

    updateLi(index: number, tab: ITab){
        const names = this.eTabs.names;
        const li = this.lis()![index];
        li.setAttribute("data-index", tab.id!);
        const div = li.querySelector(`.${names.tabClassName}`)! as HTMLDivElement;
        div.innerHTML = "";
        div.innerText = tab.title;
        if (tab.type == "loading") {
            div.classList.add(names.tabLoadingClassName);
            div.appendChild(this.__getIcon(this.eTabs.theme.loadingIcon));
        } else if(tab.icon) {
            div.classList.remove(names.tabLoadingClassName);
            div.classList.add(names.tabIconClassName);
            div.appendChild(this.__getIcon(tab.icon));
        } else {
            div.classList.remove(names.tabLoadingClassName);
        }
        const close = this.__getCloseIcon();
        // div.appendChild(this.__getTextMark());
        div.appendChild(close);
        this.__setDivTitle(div, tab);
    }

    remove(index: number) {
        return new Promise((resolve) => {
            const focusLi = this.lis()![index];
            this.tabWrap!.removeChild(focusLi);
            setTimeout(() => {
                this.initLis();
                resolve(true);
            }, 1);
        })
    }

    findLi(index): HTMLLIElement {
        return this.lis()[index];
    }

    findFocus() {
        const lis = this.lis();
        let index = 0;
        let tab = lis[0];
        lis.forEach((item, i) => {
            if (item.classList.contains(this.eTabs.names.tabFocusClassName)) {
                index = i;
                tab = item;
            }
        })
        return {
            index,
            tab
        };
    }

    findFocusIndexFromDom(dom: Element){
        const lis = this.lis();
        if (!lis || lis.length < 1) {
            return;
        }
        const compare = dom.getAttribute("data-index");
        console.log('dom', lis, dom, compare)
        for (let i = 0; i < lis.length; i++) {
            const tabLi = lis[i];
            if (tabLi.getAttribute("data-index") == compare) {
                return i;
            }
        }
    }

}

